<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import fontSize from "@/utils/fontSize";
export default {
  mounted() {},
  watch: {
    itemWidth: "drawLine", // 数值变化是更新图表
    legendLeft: "drawLine", // 数值变化是更新图表
    length: "drawLine", // 数值变化是更新图表
    cirLeft: "drawLine", // 数值变化是更新图表
    cirTop: "drawLine", // 数值变化是更新图表
    legendBottom: "drawLine", // 数值变化是更新图表
    orient: "drawLine", // 数值变化是更新图表
    showLabel: "drawLine", // 数值变化是更新图表
    isLenged: "drawLine", // 数值变化是更新图表
    isTitle: "drawLine", // 数值变化是更新图表
    titleLeft: "drawLine", // 数值变化是更新图表
    titleTop: "drawLine", // 数值变化是更新图表
    img: "drawLine", // 数值变化是更新图表
    color: "drawLine", // 数值变化是更新图表
    legendHeight: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
    // radius: "drawLine", // 数值变化是更新图表
    titleShow: "drawLine", // 数值变化是更新图表
    title: "drawLine", // 数值变化是更新图表
    tooltip: "drawLine", // 数值变化是更新图表
  },
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    itemWidth: {
      type: Number | String,
      default: () => 1,
    },
    showLabel: {
      type: Boolean,
      default: false,
    },
    // itemHeight: {
    //   type: Number | String,
    //   default: () => 11,
    // },
    isLenged: {
      type: Boolean,
      default: () => true,
    },
    legendLeft: {
      type: String,
      default: () => "61%",
    },
    titleLeft: {
      type: String,
      default: () => "30.8%",
    },
    title: {
      type: String,
      default: () => "",
    },
    subtitle: {
      type: String,
      default: () => "",
    },
    titleTop: {
      type: String,
      default: () => "29%",
    },
    titleShow: {
      type: Boolean,
      default: () => false,
    },
    legendBottom: {
      type: String,
      default: () => "center",
    },
    legendTop: {
      type: String,
      default: () => "center",
    },
    legendType: {
      type: String,
      default: () => "",
    },
    legendHeight: {
      type: String,
      default: () => "100%",
    },
    cirLeft: {
      type: [String, Number],
      default: () => 1,
    },
    cirTop: {
      type: String | Number,
      default: () => "center",
    },
    orient: {
      type: String,
      default: () => "vertical",
    },
    tooltip: {
      type: Boolean,
      default: () => true,
    },
    img: {
      // 图片地址
      type: Object | String,
      default: () => require("@/assets/images/index/middle.png"),
    },
    // radius: {
    //   type: Array | String,
    //   default: () => ["90%", "75%"],
    // },
    labelTop: {
      type: String | Number,
      default: () => "center",
    },
    isTitle: {
      type: Boolean,
      default: () => false,
    },
    length: {
      type: String | Number,
      default: () => 100,
    },
    color: {
      type: Array,
      default: () => [],
    },
    //标题
    label: {
      type: String | Number,
      default: () => "",
    },
  },
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      chartInstance: null
    }
  },
  methods: {
    drawLine() {
      try {
        var cw = document.body.clientWidth;
        // console.log(cw);
        this.$nextTick(() => {
          let colorList = [
            "#25D5E8",
            "#00C662",
            "#0690F3",
            "#FF831F",
            "#F54444",
            "#09cc3b",
            "#fc4ff0",
            "#6056e2",
            "rgba(35,195,255,1)",
            "rgba(0,235,205,1)",
            "rgba(0,193,59,1)",
            "rgba(254,111,55,1)",
            "rgba(255,203,0,1)",
            "rgba(252,42,42,1)",
            "#EE6666",
            "#5470C6",
            "#73C0DE",
            "#91CC75",
            "#EE6666",
            "#FAC657",
          ];
          colorList.unshift(...this.color);

          // var h = this.$refs.echarts_box.offsetHeight / 20;
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          const data = [];
          var names = [];
          var values = [];
          let cirLeft = "";
          let imgLeft = "";
          let cirTop = "";
          let titleLeft = "";
          // let titleTop = ''
          if (this.cirLeft != "center") {
            imgLeft = (this.cirLeft * 15) / 1 / this.itemWidth + "%";
            cirLeft = (this.cirLeft * 15) / this.itemWidth + "%";
            titleLeft = this.titleLeft;
          } else {
            imgLeft = "center";
            cirLeft = "center";
            titleLeft = "center";
          }
          if (this.cirTop != "center") {
            cirTop = (this.cirTop * 15) / this.itemWidth + "%";
            // titleTop = (this.cirTop * 32) / this.itemWidth + "%";
          } else {
            cirTop = "center";
            // titleTop = 'center'
          }
          let myData = [];
          myData = this.data;
          if (myData.length > this.length) {
            myData = myData.splice(0, this.length);
          }
          // let titleNum = 0;
          for (var i = 0; i < myData.length; i++) {
            names.push(myData[i].name);
            values.push(myData[i].value);
            // titleNum += myData[i].value;
            if (this.showLabel == false) {
              data.push({
                value: myData[i].value,
                name: myData[i].name,
              });
            } else {
              data.push({
                value: myData[i].value,
                name: myData[i].name,
              });
            }
          }

          var seriesOption = [
            {
              name: "",
              type: "pie",
              clockWise: false,
              radius: [
                fontSize.fontSize(0.595) * this.itemWidth,
                fontSize.fontSize(0.63) * this.itemWidth,
              ],
              width: fontSize.fontSize() * this.itemWidth, //自适应大小,
              height: fontSize.fontSize() * this.itemWidth, //自适应大小,
              hoverAnimation: false,
              center: ["50%", "50%"],
              left: cirLeft,
              top: cirTop,
              // itemStyle: {
              //   normal: {
              //     label: {
              //       show: true,
              //     },
              //   },
              // },
              label: {
                normal: {
                  show: true,
                  // fontWeight: 'bolder',
                  position: "center",
                  formatter: this.label,
                  textStyle: {
                    color: "rgba(255,255,255,1)",
                    fontSize: 11,
                    fontFamily: "PingFang SC",
                  },
                },
                emphasis: {
                  //中间文字显示
                  show: true,
                },
              },
              // itemStyle: {
              //   normal: {
              //     label: {
              //       show: this.showLabel,
              //       position: "outside",
              //       fontSize: fontSize.fontSize(0.0845),
              //       formatter: (params) => {
              //         var percent = 0;
              //         var total = 0;
              //         for (var i = 0; i < this.data.length; i++) {
              //           total += this.data[i].value;
              //         }
              //         percent = ((params.value / total) * 100).toFixed(0);
              //         if (params.name !== "") {
              //           return (
              //             params.name +
              //             percent +
              //             "%" +
              //             "\n" +
              //             "\n" +
              //             params.value +
              //             "kw·h"
              //           );
              //         } else {
              //           return "";
              //         }
              //       },
              //     },
              //     labelLine: {
              //       length: 9,
              //       length2: 4,
              //       show: this.showLabel,
              //       normal: {
              //         lineStyle: {
              //           color: "rgba(255, 255, 255, 0)",
              //         },
              //         smooth: 0.2,
              //       },
              //     },
              //   },
              // },
              data: data,
            },
          ];

          let option = {
            // backgroundColor: "#0A2E5D",
            title: {
              show: this.titleShow, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
              text: this.title, //主标题文本，'\n'指定换行
              subtext: this.subtitle, //副标题文本，'\n'指定换行
              // link: "", //主标题文本超链接,默认值true
              // target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
              x: titleLeft, //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
              top: this.titleTop, //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
              // textAlign: "center", //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
              // backgroundColor: "rgba(0,218,218,0.3)", //标题背景颜色，默认'rgba(0,0,0,0)'透明
              // borderColor: "#ccc", //标题边框颜色,默认'#ccc'
              // borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
              // padding: [5, 13, 5, 13], //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
              itemGap: 4, //主副标题纵向间隔，单位px，默认为10
              textStyle: {
                //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                // fontFamily: "Arial, Verdana, sans...",
                color: "rgba(255,255,255,1)",
                fontSize: 12,
                fontFamily: "PingFang SC",
                // textShadowColor: "rgba(0,255,211,1)", //阴影颜色
                // textShadowBlur: "10", //阴影的宽度
                // textShadowOffsetX: "-1", //阴影向X偏移
                // textShadowOffsetY: "-1", //阴影向Y偏移
              },
              subtextStyle: {
                color: "rgba(255,255,255,1)",
                fontSize: 17,
              },
            },
            color: colorList,
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 0,
                  style: {
                    image: this.img,
                    width: fontSize.fontSize() * 1 * this.itemWidth, //自适应大小,
                    height: fontSize.fontSize() * 1 * this.itemWidth, //自适应大小,
                  },
                  left: imgLeft,
                  top: cirTop,
                },
              ],
            },
            tooltip: {
              show: this.tooltip,
              trigger: "item",
              // trigger: "axis",
              backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
              textStyle: {
                color: "rgba(255,255,255,1)", //设置文字颜色
                fontFamily: "PingFang SC",
                fontSize: 14,
              },
              // formatter: "{b} : {c} ({d}%)",
            },
            legend: {
              type: this.legendType,
              orient: this.orient, //horizontal//横向//vertical//纵向
              height: this.legendHeight,
              left: this.legendLeft,
              // right:"5%",
              // top:this.legendTop,
              bottom: this.legendBottom,
              show: this.isLenged,
              itemWidth: 8,
              // show:false,
              itemGap: 3, //间距
              itemHeight: 8,
              data: names,
              icon: "rect", //circle, rect, roundRect, triangle, diamond, pin, arrow, none
              formatter: function (name) {
                return name.length > 4 ? name.slice(0, 4) + "..." : name;
              },
              textStyle: {
                color: "#CFEEFC",
                fontSize: 12,
                fontFamily: "PingFang SC",
              },
            },
            // toolbox: {
            //   show: true,
            // },
            series: seriesOption,
          };
          myChart.setOption(option);
          this.chartInstance = myChart
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;

  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>